<template>
	<view class="container">
		<view class="search_header">
			<view class="input">
				<uni-icons type="search" size="auto" color="#8d808d" style="margin-left: 30rpx;">
				</uni-icons>
				<input type="text" v-model="inputValue" :placeholder="placeholder" placeholder-style="font-size: 28rpx;"
					@focus="hideIcon" @blur="showIcon" @confirm="findLikeProductNo" cursor="1000" />
			</view>
			<!-- 	<view class="suspension_btn">
				<button @click="showAddModal">新增</button>
			</view> -->
		</view>
		<view class="suspension_btn">
			<image src="/static/images/add-icon.png" mode="widthFix" @click="showAddModal"></image>
		</view>
		<view class="main" v-for="(sItem,sindex) in shopList" :key="sItem.id">
			<swiper class="swiper" circular indicator-dots="indicatorDots" autoplay="fasle" :interval="50000"
				duration="duration" indicator-active-color='#fff' indicator-color='rgb(141, 141, 141)'>
				<swiper-item class="swiper-item" v-for="(iItem,iIndex) in sItem.imageValue" :key="iIndex">
					<view class="ni-bg-red">
						<!-- <image class="img" mode='scaleToFill' :src="iItem" @tap="handleTopImageClick"></image> -->
						<image class="img" mode='scaleToFill'
							src="/static/images/index/8D7216B2183B1F4B1C8AFA1E6EF189D2.jpg"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="content">
				<view class="attribute_item_box">
					<view class="attribute_item">
						<text class="little_title">货号/货名：</text>
						<text>{{sItem.productNo}}</text>
					</view>
					<view class="attribute_item">
						<text class="little_title">颜色：</text>
						<text>{{sItem.colorType}}</text>
					</view>
					<view class="attribute_item">
						<text class="little_title">尺码：</text>
						<text>{{sItem.size}}</text>
					</view>
					<view class="attribute_item">
						<text class="little_title">价格：</text>
						<text>¥{{sItem.wholesalePrice}}</text>
					</view>
				</view>
			</view>
			<view class="btn-box ">
				<button style="background-color: crimson;opacity: 0.8;" @click="delShop">删除</button>
				<button style="background-color: #97AF13;opacity: 0.8;" @click="showEditModal('edit')">修改</button>
			</view>
		</view>
		<modal :show="addShopModalVisible" class="good-detail-modal" custom>
			<!-- <image src="/static/images/menu/share-good.png"></image> -->
			<image class="close_icon" src="/static/images/menu/close.png" @tap="closeAddShopModal"></image>
			<view class="form_box">
				<uni-forms :value="formData" ref="form" :rules="rules">
					<uni-forms-item name="productNo">
						<view class="form_item">
							<text>货号/货名 :</text>
							<input v-model="formData.productNo" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="wholesalePrice">
						<view class="form_item">
							<text>价格 :</text>
							<input v-model="formData.wholesalePrice" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="colorType">
						<view class="form_item">
							<text>颜色 :</text>
							<input v-model="formData.colorType" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="size">
						<view class="form_item">
							<text>尺码 :</text>
							<input v-model="formData.size" />
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<view class="form_item">
							<text>商品图片 :</text>
							<uni-file-picker :value="showImgValue" fileMediatype="image" mode="grid"
								file-extname="png,jpg" :limit="3" @delete="deleteImg" @select="selectImg" />
						</view>
					</uni-forms-item>
					<button @click="submitForm" class="form_btn">提交</button>
				</uni-forms>
			</view>


		</modal>
	</view>
</template>

<script>
	import modal from '@/components/modal/modal'
	export default {
		components: {
			modal
		},
		data() {
			return {
				inputValue: '',
				placeholder: '请输入货号/货名',
				addShopModalVisible: false,
				shopList: [],
				imgFile: {},
				showImgValue: [
					// 回显图片格式
					// {
					// 	name: "file.txt",
					// 	extname: "txt",
					// 	url: "",
					// }
				],
				formData: {
					operateType: 'add',
					productNo: '',
					wholesalePrice: '',
					colorType: '',
					size: '',
					imageValue: [],
				},
				rules: {
					productNo: {
						rules: [{
							required: true,
							errorMessage: '请填写货号/货名',
						}]
					},
					wholesalePrice: {
						rules: [{
							required: true,
							errorMessage: '请填写价格',
						}]
					},
					colorType: {
						rules: [{
							required: true,
							errorMessage: '请填写颜色',
						}]
					},
					size: {
						rules: [{
							required: true,
							errorMessage: '请填写尺码',
						}]
					},
				},
				// []
			}
		},
		onLoad() {},
		methods: {
			// 搜索
			findLikeProductNo() {
				if (!this.inputValue) return
				this.$newApi.findLikeProductNo({
					productNo: this.inputValue
				}).then(res => {
					console.log('元数据', res.data)
					this.shopList = res.data
					this.shopList?.forEach(fItem => {
						fItem.imageValue = fItem.imageValue.split(',')
					})
					// this.formData = this.shopList[0]
					// this.showImgValue = this.formData.imageValue.forEach()	
					console.log('查询数据', this.shopList)
				})
			},

			// 获取上传状态
			selectImg(selCallback) {
				console.log('1. 选择文件caizi：', selCallback)
				console.log('1.1. 绑定组件的值：', this.showImgValue)
				this.imgFile = selCallback
				console.log('2. 选择文件caizi：', this.imgFile)
			},
			// 删除照片
			deleteImg(delCallback) {
				console.log('1. 删除-当前图片信息：', delCallback)
				let obj = this.imgFile
				for (let upKey in obj) {
					if (obj.hasOwnProperty(upKey)) {
						obj[upKey].splice(delCallback.index, 1)
					}
				}
				console.log('2. 删除成功：', this.imgFile)
			},
			// 提交
			submitForm(form) {
				this.$refs.form.validate().then(res => {
					console.log('3.1. 表单数据：', res)
					console.log('3.1. 图片流数据：', this.imgFile)
					// 没选择图片 或 选择后清空图片，都不允许提交表单
					if (JSON.stringify(this.imgFile) === '{}' || !this.imgFile.tempFilePaths.length) {
						uni.showToast({
							title: '请选择图片',
							icon: 'none',
							duration: 1500
						})
						return
					}
					this.handleUploadFile()
				})
			},
			// 上传图片到文件服务器，然后提交表单数据
			handleUploadFile() {
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				// 使用Promise.all来同步上传所有文件
				Promise.all(this.imgFile.tempFilePaths.map((filePath, index) => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://caizipromotion.icu:8443/api/v1/oss/upload', //仅为示例，非真实的接口地址
							filePath: filePath,
							name: 'multipartFile',
							formData: {
								target: 'warehouse',
								multipartFile: {
									tempFilePaths: [filePath],
									tempFiles: [this.imgFile.tempFiles[index]],
								}
							},
							header: {
								'token': uni.getStorageSync('token') || ''
							},
							success: (uploadFileRes) => {
								resolve(uploadFileRes);
							},
							fail: (error) => {
								reject(error);
							}
						});
					});
				})).then(uploadFileRes => {
					uni.hideLoading();
					console.log('3.上传成功', uploadFileRes)
					//处理图片地址
					const list = []
					uploadFileRes.forEach(rItem => {
						list.push(rItem.data)
					})
					this.formData.imageValue = list.join(',')
					console.log('4.准备提交表格数据', this.formData)
					this.$newApi.addShop(this.formData).then((res) => {
						console.log('5.成功提交', res.data)
						this.closeAddShopModal()
						uni.showToast({
							title: '新增成功',
							icon: 'none',
							duration: 1000
						});
					})
				}).catch(error => {
					console.error('Upload failed', error);
					uni.hideLoading();
				});
			},

			hideIcon() {
				this.placeholder = ''
			},
			showIcon() {
				this.placeholder = '请输入货号/货名'
			},
			showAddModal() {
				this.addShopModalVisible = true
			},
			closeAddShopModal() {
				this.addShopModalVisible = false
			},
			// 放大商品图
			handleTopImageClick(event) {
				console.log('放大商品图', event)
				return
				uni.previewImage({
					current: 'https://wx4.sinaimg.cn/mw690/64be6620ly1hsgup6bwnwj20m80m8t9w.jpg', // 当前显示图片的链接（必填）
					urls: [
						'https://wx4.sinaimg.cn/mw690/64be6620ly1hsgup6bwnwj20m80m8t9w.jpg'
					] // 所有图片的链接列表（必填）
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		//新增按钮
		.suspension_btn {
			position: fixed;
			bottom: 60rpx;
			right: 60rpx;
			z-index: 99;

			image {
				margin-left: 30rpx;
				position: relative;
				width: 80rpx;
				height: 80rpx;
				opacity: 0.8;
			}
		}
	}

	// 头部搜索
	.search_header {
		// width: 85%;
		height: 72rpx;
		margin: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		// padding: 30rpx 0;
		// box-sizing: border-box;
		.input {
			flex: 2;
			width: 542rpx;
			height: 72rpx;
			background: #fff;
			border-radius: 6rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			position: relative;

			input {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				margin-left: 50rpx;
			}

			uni-icons {
				position: absolute;
				transform: translateY(-50%);
				top: 50%;
				left: -20rpx;
			}
		}



	}



	.main {
		width: 375rppx;
		color: black;
		margin: 40rpx 28rpx 52rpx 28rpx;
		box-shadow: 10rpx 4rpx 18rpx 0rpx rgb(141, 141, 141);
		background: #fff;
		border-radius: 16rpx;

		.img {
			width: 100%
		}

		.swiper {
			height: 375rpx;
		}

		.content {
			padding: 20rpx;

			.attribute_item_box {
				background-color: #fff;
				color: black;
				font-weight: bold;
			}

			.attribute_item {
				margin: 15rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.little_title {
				color: rgb(141, 141, 141);
			}
		}

		// 修改 删除按钮
		.btn-box {
			display: flex;
			align-items: center;
			// justify-content: flex-end;
			padding: 0 20rpx 20rpx 20rpx;


			button {
				border: none;
				height: 72rpx;
				width: 150rpx;
				font-size: 32rpx;
				text-align: center;
				font-weight: 550;
				line-height: 72rpx;
				color: #FFFFFF;
				border-radius: 12rpx;
				// margin: 40rpx auto;
				margin-right: 20rpx;
			}

			button::after {
				border: none
			}
		}

	}

	.good-detail-modal {
		width: 92%;
		color: #5A5B5C;
		padding: 0rpx;
		border-radius: 12rpx;
		position: relative;

		.close_icon {
			position: absolute;
			top: 0rpx;
			right: 10rpx;
			width: 100rpx;
			height: 100rpx;
		}

		/deep/.uni-forms-item {
			padding: 0 !important;
			margin-bottom: 20rpx !important;
		}

		/deep/.uni-forms-item__label {
			padding: 0 !important;
			height: 96rpx !important;
			line-height: 96rpx !important;
		}


		.form_box {
			margin-top: 65rpx;

			.form_item {
				display: flex;
				align-items: center;

				text {
					width: 180rpx;
					text-align: right;
					margin-right: 10rpx;
				}

				input {
					background: rgb(241, 241, 241);
					border-radius: 8rpx;

				}
			}

			.form_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $color-primary;
				color: $text-color-white;
				font-size: $font-size-lg;
				height: 80rpx;
				border-radius: 12rpx;
			}
		}

	}

	/deep/.uni-forms-item__error {
		top: 58rpx !important;
		left: 188rpx;
	}
</style>